<template>
    <div class="container">
        <img :src="imgUrl" alt="" class="image">
        <div class="bottom">
            无忧变美全方位守护
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      imgUrl: ""
    };
  },
  created() {
    this.imgUrl = localStorage.url;
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin-top: 10px;
  .image {
    width: 255px;
    height: 225px;
    display: block;
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
  }
  .bottom {
    height: 60px;
    width: 100%;
    line-height: 60px;
    text-align: center;
    font-size: 17px;
    font-family: "PingFangSC-Regular";
    color: rgba(255, 0, 0, 1);
    background: rgba(255, 220, 220, 1);
    opacity: 0.5;
    position: absolute;
    bottom: 0;
    left: 0;
    font-weight: bold;
  }
}
</style>

